<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			<div>
				父级box:{{num}}<button @click='num++'>++</button>
			</div>
			<hr>
			<lee :boxnum="num" @leenum="numbtn" @leenum2="numbtn"></lee>
		</div>
		<template id="lee">
			<div>
				子级组件lee（只读）：{{boxnum}}
				<p>
					子组件lee（重命名）：<button @click="btn2">--</button>{{num}}<button @click="btn">++</button>
				</p>
			</div>
		</template>
	</body>
	<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		Vue.component('lee',{
			template:'#lee',
			props:["boxnum"],
			data(){
				return{
					num:this.boxnum
				}
			},
			watch:{
				boxnum(a,b){
					this.num=a
					// console.log(a,b)
				}
			},
			methods:{
				btn(){
					this.num++
					this.$emit('leenum',this.num)
				},
				btn2(){
					this.num--
					this.$emit('leenum2',this.num)
				}
			}
		})
		new Vue({
			el:'#box',
			data:{
				num:0
			},
			methods:{
				numbtn(num){
					this.num=num
				}
			}
		})
	</script>
</html>
